<template>
    <div>
        <el-page-header @back="gotoRoute('/eva-project/pager')" content="二维码账户管理">
        </el-page-header>
        <el-divider></el-divider>
        <el-button-group v-if="allowed([0])">
            <el-button :disabled="is_finished" size="mini" @click="generateUserCode(false)"
                type="primary">生成所有主体账户</el-button>
            <el-button :disabled="is_finished" size="mini" @click="generateQrcode(false)"
                type="success">生成所有二维码</el-button>
            <el-link :disabled="is_finished" type="success" :href="qrcodeLink(false)" target="_blank">下载二维码PDF</el-link>
        </el-button-group>
        <el-button-group v-if="allowed([1])">
            <el-button size="mini" @click="generateUserCode(true)" type="primary">生成所有测试主体账户</el-button>
            <el-button size="mini" @click="generateQrcode(true)" type="success">生成所有测试二维码</el-button>
            <el-link type="success" :href="qrcodeLink(true)" target="_blank">下载测试二维码PDF</el-link>
        </el-button-group>
        <el-divider></el-divider>
        <el-table :data="tableData.rows" border class="w-80%">
            <el-table-column prop="owner_name_name" label="主体名称" width="200">
            </el-table-column>
            <el-table-column prop="plan_quantity" label="计划数量" width="100">
            </el-table-column>
            <el-table-column prop="logined" label="已登录" width="100">
            </el-table-column>
            <el-table-column prop="submited" label="已提交" width="220">
            </el-table-column>
            <el-table-column v-if="allowed([0])" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button :disabled="is_finished" type="primary" size="small"
                            @click="generateOwnedUser(scope.row.project_id, scope.row.project_owner_id)">重新生成</el-button>
                        <el-button :disabled="is_finished" type="success" size="small"
                            @click="generateExtUser(scope.row.project_id, scope.row.project_owner_id)">追加</el-button>
                    </el-button-group>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="追加票数量" :visible.sync="showAppendTick.show">
            <el-input-number size="small" v-model="showAppendTick.amount"></el-input-number>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showAppendTick.show = false">取 消</el-button>
                <el-button type="primary" @click="onConfirmAppend">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { EvaProjectUserApi } from '../../../api/eva-project/user'
import { sharedConfig } from '../../shared/BaseCurd';
const api = new EvaProjectUserApi;

export default {
    name: "EvaProjectUserPager",
    props: ["project_id", "is_finished"],
    async mounted() {
        this.loadPager();
    },
    methods: {
        ...sharedConfig.methods,
        async loadPager() {
            const result = await api.findOwnedUser({ project_id: this.project_id });
            this.tableData = { rows: result.data };
        },
        async generateUserCode(test) {
            this.$confirm("确定要重新生成所有账户，以前的投票数据将都失效?", "系统提示").then(async () => {
                let loader = this.$loading.show();
                const users = await api.generateUser({ project_id: this.project_id, test });
                loader.hide();
                this.$message.success("已经生成" + users.data.length + "个新账户");
            }).catch(console.error);

        },
        async generateExtUser(project_id, project_owner_id) {
            this.showAppendTick.show = true;
            this.showAppendTick.project_id = project_id;
            this.showAppendTick.project_owner_id = project_owner_id;
        },
        async generateOwnedUser(project_id, project_owner_id) {
            this.$confirm("确定要重新该类主体账户？，以前的投票数据将都失效?", "系统提示").then(async () => {
                let loader = this.$loading.show();
                const users = await api.generateUser({
                    project_id,
                    project_owner_id,
                    user_only: true
                });
                loader.hide();
                this.$message.success("已经生成" + users.data.length + "个新账户");
            }).catch(console.error);
        },
        async onConfirmAppend() {
            let loader = this.$loading.show();
            const users = await api.generateUser({
                project_id: this.showAppendTick.project_id,
                project_owner_id: this.showAppendTick.project_owner_id,
                amount: this.showAppendTick.amount,
            });
            loader.hide();
            this.showAppendTick.show = false;
            this.showAppendTick.project_id = null;
            this.showAppendTick.project_owner_id = null;
            this.showAppendTick.amount = 0;
            this.$message.success("已经生成" + users.data.length + "个新账户");
        },
        generateQrcode(test) {
            this.$router.push({ name: "qr-code", query: { project_id: this.project_id, is_test: test } });
        },
        qrcodeLink(test) {
            const host = import.meta.env.PUBLIC_APP_HOST;
            const port = import.meta.env.PUBLIC_API_PORT;
            return `http://${host}:${port}/backend/qrocde?project=${this.project_id}&test=${test}`;
        },
    },

    data() {
        return {
            showAppendTick: {
                show: false,
                project_id: null,
                project_owner_id: null,
                amount: 0,
            },
            tableData: { rows: [] }
        }
    }
}
</script>